<template>
  <view>
    <!-- :style="[{ height: CustomBar + 'px' }]" -->
    <view class="cu-custom">
      <view class="cu-bar fixed" :style="style" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
        <view class="action" @tap="BackPage" v-if="isBack">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <view class="action" v-else>
          <slot name="backText"></slot>
        </view>
        <!-- :style="/*height:${CustomBar}px;*/ `padding-top:${StatusBar}px`" -->
        <view class="111 content nav-content">
          <slot name="content"></slot>
        </view>
        <view class="right cu-custom__right">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      CustomBars: this.CustomBar + "px",
      getCurrentPages: getCurrentPages(),
    };
  },
  name: "custom",
  computed: {
    style() {
      var StatusBar = this.StatusBar;
      var bgImage = this.bgImage;
      // var style = `padding-top:${StatusBar}px;`;
      var style = "";
      if (this.bgImage) {
        style = `${style}background-image:url(${bgImage});`;
      }
      return style;
    },
  },
  props: {
    bgColor: {
      type: String,
      default: "",
    },
    isBack: {
      type: [Boolean, String],
      default: false,
    },
    bgImage: {
      type: String,
      default: "",
    },
  },
  methods: {
    BackPage() {
      const allroutes = getCurrentPages();
      const cureentRoute = allroutes[allroutes.length - 1].route;
      // 如果当前在聊天页面，自动返回到首页，避免层级过深
      const users = uni.getStorageSync("userInfo");
      if (
        cureentRoute === "pages/mine/profile/real-name" &&
        (!users.identity || !users.identity_address || !users.user_name)
      ) {
        uni.showToast({
          title: "请先完成实名认证",
          icon: "none",
        });
      } else {
        if (cureentRoute == "pages/message/chat") {
          uni.navigateBack();
          return;
        } else if (allroutes.length < 2 && "undefined" !== typeof __wxConfig) {
          let url = "/" + __wxConfig.pages[0];
          return uni.redirectTo({
            url,
          });
        }
        if (allroutes.length == 1) {
          uni.reLaunch({
            url: "/pages/index/index",
          });
        } else {
          uni.navigateBack({
            delta: 1,
          });
        }
      }
    },
  },
};
</script>
<style lang="scss">
.cu-custom,
.nav-content,
.cu-bar {
  width: 100vw;
  height: calc(var(--amplified_base) * 60px);
}

.cu-bar {
  background-color: #fff;
}

.cu-custom__right,
.action {
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 10;
  pointer-events: auto;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cu-bar .content {
  font-size: calc(var(--amplified_base) * 32rpx);
  height: auto;
  width: 80%;
}

.cu-custom .cu-bar .content {
  max-width: 80%;
}
// .level-icon-wrap {
//   display: flex;
//   align-items: center;
//   margin-left: 12rpx;
//   color: #22436d;
//   font-size: 24rpx;
//   padding: 0 12rpx;
// }
// .level-icon {
//   width: 40rpx;
// }
</style>
